<template>
    <el-row :gutter="16">
        <el-col :span="8">
            <div class="statistic-card">
                <el-statistic :value="98500">
                    <template #title>
                        <div style="display: inline-flex; align-items: center">待对账总额</div>
                    </template>
                </el-statistic>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="statistic-card">
                <el-statistic :value="693700">
                    <template #title>
                        <div style="display: inline-flex; align-items: center">已对账总额</div>
                    </template>
                </el-statistic>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="statistic-card">
                <el-statistic :value="72000">
                    <template #title>
                        <div style="display: inline-flex; align-items: center">总金额</div>
                    </template>
                </el-statistic>
            </div>
        </el-col>
    </el-row>
    <el-row style="margin-top: 20px" :gutter="16">
        <el-col :span="12">
            <el-card
                :body-style="{ padding: '2px' }"
                style="margin-top: 20px"
                class="mt-4 !border-none"
                shadow="never"
            >
                <template #header>
                    <div class="card-header">
                        <span>商品销量排行</span>
                    </div>
                </template>
                <el-table size="large" v-loading="loading" :data="list">
                    <el-table-column label="排名" prop="id" min-width="80" />
                    <el-table-column
                        label="商品名称"
                        prop="title"
                        min-width="160"
                        show-tooltip-when-overflow
                    />
                    <el-table-column label="销量" prop="category" min-width="100" />
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card
                :body-style="{ padding: '2px' }"
                style="margin-top: 20px"
                class="mt-4 !border-none"
                shadow="never"
            >
                <template #header>
                    <div class="card-header">
                        <span>商品销量排行</span>
                    </div>
                </template>
                <el-table size="large" v-loading="loading" :data="list">
                    <el-table-column label="排名" prop="id" min-width="80" />
                    <el-table-column
                        label="商品名称"
                        prop="title"
                        min-width="160"
                        show-tooltip-when-overflow
                    />
                    <el-table-column label="销售金额" prop="category" min-width="100" />
                </el-table>
            </el-card>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
const loading = ref(false)
const list = ref([])
</script>

<style scoped>
:global(h2#card-usage ~ .example .example-showcase) {
    background-color: var(--el-fill-color) !important;
}

.el-statistic {
    --el-statistic-content-font-size: 28px;
}

.statistic-card {
    height: 100%;
    padding: 20px;
    border-radius: 4px;
    background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--el-text-color-regular);
    margin-top: 16px;
}

.statistic-footer .footer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.statistic-footer .footer-item span:last-child {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.green {
    color: var(--el-color-success);
}
.red {
    color: var(--el-color-error);
}
</style>
